<template>
	<view>
		<Header
			:parent_name= "customer_name"
			:header_content="header_content"
			:header_title="header_title"
		></Header>
		<view class="banner">
			<image class="img" :src="defaultImg"></image>
			<view class="banner_title">{{albumInfo.album_title || ''}}</view>
			<view class="banner_detail">关于宝贝智力提升需要哪些关键性…</view>
		</view>
		<view class="clearance"></view>
		<view class="directory">
			<view class="directory_head">
					<view class="directory_title">
						<view class="target " :class="{target_active: currentOption ===0}" @tap="selectOption(0)">简介</view>
					</view>
					<view class="directory_title">
						<view class="target" :class="{target_active: currentOption ===1}"  @tap="selectOption(1)" >目录</view>
					</view>
			</view >
				<view v-show="currentOption ===0">
					<view class="detail_wraper">
						<view class="detail_title">{{albumInfo.album_title || ''}}</view>
						<view class="detail_time">{{albumInfo.updated_at || ''}}</view>
						<view class="detail_content">
							<view class="content_item">
								{{albumInfo.album_intro || ''}}
							</view>
						</view>
					</view>
				</view>
				<view v-show="currentOption ===1">
					<view class="option">
						<view class="option_item f22">
							共{{total}}条声音
						</view>
						<view class="option_item f26">
							<text  :class="{item_active:currentSort===0}" @tap="selectSort(0)">正序</text>
							<text >｜</text>
							<text @tap="selectSort(1)" :class="{item_active:currentSort===1}">倒序</text>
						</view>
					</view>
					<view class="directory_list">
						<view class="directory_item" v-for = "(item,index) in albumList" :key='index' @tap="goto(item.item_id)">
							<i class='iconfont item_icon icon_color' v-show="item.item_id === currentItemId*1">&#xe605;</i>
							<view  v-show="item.item_id !== currentItemId*1" class="item_icon">{{index+1}}</view>
							<view class="item_detail">
								<view class="item_title" >{{item.item_title || ''}}</view>
								<!-- <view class="item_time" v-show="index !== 0"> 昨天 16:09更新</view> -->
								<view class="item_time flex" ><i class='iconfont f24 mr20'>&#xe60d;</i>{{item.duration}}</view>
							</view> 
						</view>
					</view>
							
				</view>
			
		</view>
	
	</view>
</template>

<script>
	import Header from "../component/tutorial_header.vue";
	import apis from "@/api"
	export default {
		data() {
			return {
				currentItemId:'',
				header_title:"父母课堂",
				parent_name:"尊敬的",
				header_content:"科学根据宝宝当前月龄进行学习～",
				currentOption:0,
				currentSort:0,
				albumId:'',
				albumInfo:'',
				albumList:[],
				total:0,
				page:0,
				reverse:false,
				currentCustomer:'',
				customer_name:'',
				defaultImg:this.config.COURSEBANNER
			}
		},
		onLoad({albumId}){
			this.currentCustomer = getApp().globalData.currentCustomer;
			this.customer_name = this.currentCustomer.customer_name
			this.albumId = albumId
			this.getAlbumItemList()
			this.getAlbumInfo()
		},
		onShow(){
			this.currentItemId = uni.getStorageSync('TUTORIAL_ITEMID')
		},
		//下拉刷新
		onReachBottom(){
			if(this.currentOption === 1){
				if(this.total && this.albumList.length>= this.total){
						uni.showToast({title: '没有更多啦',icon:'none'})
					return
				}
				this.getAlbumItemList()
			}
		},
		methods: {
			getAlbumInfo(){
				const args ={
					album_id:this.albumId
				}
				this.common.http.request(apis.albumInfo,"get",args,res=>{
					if(res.data.code === 0){
						this.albumInfo= res.data.data
					}
				})
			},
			getAlbumItemList(){
				this.page++
				const args={
					album_id:this.albumId,
					page:this.page,
					limit:15
				}
				this.common.http.request(apis.albumItemList,"get",args,res=>{
					if(res.data.code === 0){
						this.total = res.data.data.total
						if(this.albumList.length){
							this.albumList = [this.albumList,res.data.data.list].flat()
						}else{
							this.albumList = res.data.data.list
						}
					}
				})
			},
			
			selectOption(index){
				this.currentOption = index
				if(index===1){
					this.page = 0
					this.albumList=[]
					this.getAlbumItemList()
				}
			},
			
			goto(itemId){
				uni.navigateTo({
					'url':'../media/media?itemId='+ itemId
				})
			},
			
			// 正序，倒序
			selectSort(index){
				this.currentSort = index
				if(!this.reverse&index ===1){
					this.albumList.reverse()
					this.reverse= true
				}else if(this.reverse&index ===0){
					this.albumList.reverse()
					this.reverse = false
				}
			}
		},
		components:{
			Header
		},
	}
</script>

<style lang="scss">
	.banner{
		padding: 30rpx;
		.img{
			width: 690rpx;
			height: 260rpx;
		}
		.banner_title{
			height:41rpx;
			font-size:30rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height:42rpx;
			margin: 10rpx 0; 
		}
		.banner_detail{
			height:41rpx;
			font-size:26rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			line-height:42rpx;
			margin: 10rpx 0; 
		}
	}
	.clearance{
		width: 100vw;
		height: 20rpx;
		background: #f7f7f7;
	}
	.directory{
		width: 100vw;
		padding: 30rpx;
		box-sizing: border-box;
		.directory_head{
			height: 90rpx;
			display: flex;
			flex: 1;
			border-bottom: 1rpx solid #eee;
			.directory_title{
					width: 375rpx;
					height: 85rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size:32rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(153,153,153,1);
					.target{
						font-family:PingFangSC-Semibold,PingFang SC;
						font-weight:600;
						height: 60rpx;
						border-bottom: 9rpx solid #fff;
					}
					.target_active{
						color:rgba(51,51,51,1);
						border-bottom: 9rpx solid #B41E23;
					}
				}
			
		}
		.option{
			display: flex;
			justify-content: center;
			align-items: center;
			.option_item{
				height: 80rpx;
				width: 375rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(199,199,204,1);
				.item_active{
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(29,54,102,1);
					letter-spacing:1rpx;
				}
			}
		}
		.directory_list{
			.directory_item{
				height: 150rpx;
				border-bottom: 1rpx solid #eee;
				display: flex;
				align-items: center;
				font-size:34rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				.item_icon{
					width: 32rpx;
					height: 32rpx;
					margin:30rpx;
				}
				
				.icon_color{
					color: #B61D24;
				}
				.item_detail{
					margin: 20rpx;
					height: 110rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.item_title{
						height:48rpx;
						font-size:34rpx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
						line-height:48rpx;
					}
					.item_time{
						height:40rpx;
						font-size:28rpx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:#999999;
						line-height:40rpx;
					}
				}
			}
		}
	
	}
	.detail_wraper{
		width:748rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		padding: 30rpx;
		
		.detail_title{
			height:45rpx;
			font-size:32rpx;
			font-family:PingFangSC-Semibold,PingFang SC;
			font-weight:600;
			color:rgba(51,51,51,1);
			line-height:45rpx;
			letter-spacing:2rpx;
			margin-bottom: 10rpx;
		}
		.detail_time{
			height:30rpx;
			font-size:22rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
			letter-spacing:1rpx;
			margin-bottom: 30rpx;
		}
		.detail_subtitle{
			font-size:22rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
			line-height:30rpx;
			letter-spacing:1rpx;
		}
		.detail_content{
			width: 668rpx;
			height: 150rpx;
			font-size:26rpx;
			padding-bottom: 110rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(142,142,147,1);
			letter-spacing:1rpx;
			box-sizing: border-box;
			.content_item{
				margin-bottom: 50rpx;
			}
		}
		.detail_cancel{
			position: fixed;
			left: 0;
			bottom: 0;
			width:750rpx;
			height:110rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx -1rpx 4rpx 0rpx rgba(148,148,148,0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size:32rpx;
			font-family:PingFangSC-Semibold,PingFang SC;
			font-weight:600;
			color:rgba(51,51,51,1);
			letter-spacing:1rpx;
		}
	}
	
	.flex{
		display: flex;
		align-items: center;
	}
	.f26{
		font-size: 26rpx;
	}
	.f22{
		font-size: 22rpx;
	}
</style>
